import "./index.scss"
import {View, Button} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext, useEffect} from "react"
import Taro, {useDidHide, useDidShow, useRouter} from "@tarojs/taro"
import {devInfoStore} from "./model"

const Devinfo = () => {
	let router = useRouter()
	const {updatePageQuery, pageData, updatePageDataSource} = useContext(devInfoStore)

	// 可以使用所有的 React Hooks
	useEffect(() => {
		console.log("Devinfo useEffect")
	})
	// 对应 onShow
	useDidShow(() => {
		console.log("Devinfo useDidShow")
		updatePageQuery(router.params)
		updatePageDataSource()
	})
	// 对应 onHide
	useDidHide(() => {
		console.log("Devinfo useDidHide")
	})

	// 复制设备编码点击事件
	const copyDevGIdClick = () => {
		Taro.setClipboardData({
			data: pageData?.devGId || "", //要被复制的内容
			success: () => {
				//复制成功的回调函数
				Taro.showToast({
					//提示
					title: "复制成功",
					icon: "success"
				})
			}
		})
	}
	return (
		<View className="container px-24">
			<View className="mt-16" style="height:40px;line-height:40px">
				{pageData?.devDataMsgList.map(item => (
					<View className="flex justify-between items-center">
						<View className="hanzi text-15 font-medium ">{item.devBaseDataName}：</View>
						<View className="flex-1 flex justify-end items-center text-15 text-x_text">
							{item.devBaseDataValue || "---"}
						</View>
					</View>
				))}
				<View className="flex justify-between items-center">
					<View className="hanzi text-15 font-medium ">设备编号：</View>
					<View className="flex-1 flex justify-end items-center text-15 text-x_text">
						{pageData?.devGId}
					</View>
				</View>
				<Button
					className="hanzi w-full bg-primary text-14 text-white font-medium rounded-6 mt-100"
					formType="submit"
					onClick={() => {
						copyDevGIdClick()
					}}
				>
					复制设备编码
				</Button>
			</View>
		</View>
	)
}
export default observer(Devinfo)
